<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>门店搜索</title>
</head>
<body>
<label for="province">
    province:
    <input type="text" id="province" oninput="searchStore(this)"/>
</label>
<label for="city">
    city:
    <input type="text" id="city" oninput="searchStore(this)"/>
</label>
<label for="area">
    area:
    <input type="text" id="area" oninput="searchStore(this)"/>
</label>
<label for="name">
    name:
    <input type="text" id="name" oninput="searchStore(this)"/>
</label>
<!-- 数据预览 -->
<div id="data-preview">

</div>
<script>
    let condition = {
        province: '',
        city: '',
        area: '',
        name: '',
        page: 1,
        limit: 10,
    };

    function searchStore(obj) {
        console.log(obj.id);
        console.log(obj.value);
        condition[obj.id] = obj.value;
        fetch(
            '/addons/cxdx/service/store',
            {
                method: 'POST',
                body: JSON.stringify(
                    condition
                )
            }
        )
            .then((result) => result.json())
            .then(
                (result) => {
                    console.log(result);
                    let dataPreview = document.getElementById('data-preview');
                    for (let i = 0; i < result.count; i++) {
                        // 生成预览 html
                        let dataPreviewContent = document.createElement('div');
                        // 生成图片
                        let dataPreviewImage = document.createElement('img');
                        dataPreviewImage.src = result.list[i].image;
                        dataPreviewImage.style.width = '100px';
                        dataPreviewImage.style.height = '100px';
                        dataPreviewContent.append(dataPreviewImage);
                        // 生成 门店名称 显示
                        let couponIdSpan = document.createElement('p');
                        couponIdSpan.innerText = "门店名称: " + result.list[i].name;
                        dataPreviewContent.append(couponIdSpan);
                        // 生成 联系电话 显示
                        let dateToSpan = document.createElement('p');
                        dateToSpan.innerText = "联系电话: " + result.list[i].contact;
                        dataPreviewContent.append(dateToSpan);
                        // 添加到预览
                        dataPreview.append(dataPreviewContent);
                    }
                }
            )
            .catch(
                (err) => {
                    console.log(err)
                }
            )
    }
</script>
</body>
</html>